
@mixin col-width{
  &:nth-child(1){ width: 40px; border-right: 0;}
  &:nth-child(2){ width: 100px;}
  &:nth-child(3){ width: 95px;}
  &:nth-child(4){ width: 90px;}
  &:nth-child(5){ width: 90px;}
  &:nth-child(6){ width: 90px;}
  &:nth-child(7){ width: 90px;}
  &:nth-child(8){ width: 90px;}
  &:nth-child(9){ width: 92px;}
  &:nth-child(10){ width: 92px;}
  &:nth-child(11){ width: 90px;}
  &:nth-child(12){ width: 92px;}
  &:nth-child(13){ width: 92px; border-right:0;}
}

@mixin border-color{
  border:1px solid #d9d9d9;
}

.list_table{
  .search_nav{
    .nav_item{ display:inline-block; margin-right:10px;}
    span{
      display:inline-block; text-align:right;
    }
  }
  table.commission_list,table.attendance_list,table.salary_list{
    width:100%;
    thead{
      tr{
        th{
          @include col-width;
          @include border-color;
          box-sizing: border-box;
          height:35px;
          &:first-child{ border-right:1px solid #fff;}
        }
      }
    }
    tbody{
      tr{
        &:nth-child(odd){
          background: #F2F2F2;
        }

        &:hover{
          background: #dce2e5;
        }

        td{
          @include col-width;
          height:28px;
          text-align:center;
          box-sizing: border-box;
          @include border-color;

          a:hover, a:hover i{
            color: #014c8c;
          }
        }
      }
    }
    tfoot{
      tr{
        height:28px;
        td{
          @include border-color;
          span{
            display:inline-block;
            font-weight:bold;
            text-align:left;
          }
        }
      }
    }
  }
}


ul{
  list-style: none;
  padding: 0px;
}
.content .main_top .back_to_list {
    float: right;
    font-size: 20px;
    color: #2d1152;
}

.change_view_btn{
  padding: 3px 14px;
  border-bottom: 2px solid #BE1274;
  color:#fff;
  background:rgb(234, 18, 158);
}


@mixin col-width{
  &:nth-child(1){ width: 8.10%; }
  &:nth-child(2){ width: 12.86%; }
  &:nth-child(3){ width: 6.82%; }
  &:nth-child(4){ width: 7.82%; }
  &:nth-child(5){ width: 7.25%; }
  &:nth-child(6){ width: 7.96%; }
  &:nth-child(7){ width: 9.31%; }
  &:nth-child(8){ width: 7.89%; }
  &:nth-child(9){ width: 8.24%; }
  &:nth-child(10){ width: 7.75%; }
  &:nth-child(11){ width: 7.82%; }
  &:nth-child(12){ width: 8.17%; }
}

@mixin input-width{
  width:135px;
}



.details{
  .salary_list_table{
    .list_wrap{
      overflow-y: scroll;
      border-right: 1px solid #d9d9d9;
      &.highlight{
        tr:hover{ cursor:pointer; background:#FFF9F9; }
        tr.checked{ background:#FFF9F9; }
      }
    }
    ul.salary_list_head{
      height:35px; line-height:35px;
      border:1px solid #d9d9d9;
      li{
        float:left;
        text-align:center; font-weight:bold;
        border-right:1px solid #d9d9d9;
        box-sizing: border-box;
        &:nth-child(1){ width: 40px; border-right: 0;}
        &:nth-child(2){ width: 100px;}
        &:nth-child(3){ width: 95px;}
        &:nth-child(4){ width: 90px;}
        &:nth-child(5){ width: 90px;}
        &:nth-child(6){ width: 90px;}
        &:nth-child(7){ width: 90px;}
        &:nth-child(8){ width: 90px;}
        &:nth-child(9){ width: 92px;}
        &:nth-child(10){ width: 92px;}
        &:nth-child(11){ width: 90px;}
        &:nth-child(12){ width: 92px;}
        &:nth-child(13){ width: 92px; border-right:0;}
      }
    }
  }
  .salary_related{
    display:none;
    .checkout_nav{
      height:30px; line-height:20px;
      border-bottom:1px solid #d9d9d9;
      &>div{
        display: inline-block;
        &.staff_select{
          a{ display:inline-block;}
        }
        &.operation{
          input.edit_btn,input.save_btn{
            &[disabled]{ cursor:auto; background:#eee; color:#ccc;}
          }
        }
      }
      span{
        display:inline-block;
      }
    }
    table.abstract{
      margin:8px 0;
      width:100%;
      th,td{
        height:25px;
        border:1px solid #d9d9d9;
        @include col-width;
      }
      th{ border-top:none;}
      td{ border-bottom:none;}
    }

    div.salary_checkout{
      height: 452px;
      border:1px solid #d9d9d9;
      div.salary{
        border-top:12px solid #EDECEC;
        ul{
          margin-bottom: 30px;
          padding:10px 0;
          float:left;
          height:420px;
          &.total_salary{
            width: 47.5%;
            border-right:1px solid #d9d9d9;
            input[type="text"] { text-indent:40px;}
            &>li{
              &:first-child{ text-indent: 12px; }
              &.total{
                input { @include input-width; margin:30px 43px 0 0; }
              }
              ol{
                float:left;
                margin:10px 15px;
                li{
                  height:32px; line-height:32px;
                  input[type="text"]{
                    @include input-width; margin-left:15px;
                    &.total{ border-color: #F70500 ;}
                  }
                  label{ width:123px; text-align:right; }
                  &.bonus{ height: 64px; line-height: 96px;}
                }
              }
            }
          }
          &.deducted_salary{
            width: 29.5%;
            border-right:1px solid #d9d9d9;
            &>li:first-child { text-indent: 12px;}
            &>li.total{
              input{ margin-top:156px; }
              label { margin-left: 36px; }
            }
            input[type="text"] { text-indent:40px;}
            ol{
              margin: 10px auto 0 auto;
              width:70%;
              li{
                height:32px; line-height:32px;
                label { margin-right:12px; }
                input.total{ border-color: #F70500 ;}
              }
            }
          }
          &.balance_salary{
            width: 22.55%;
            &>li:first-child { text-indent: 12px;}
            li{
              label{
                text-align: left;
                @include input-width;
                margin: 40px auto 15px auto;
              }
              input{ @include input-width; text-indent:40px;}
            }
          }
        }
      }
    }
  }
}
